<!DOCTYPE html>
<html>
  <head>
    <title>css-training</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css" >
  </head>
  <body>
    <header>
      <img class="logo" alt="logo" src="img/logo.png">
      <div class="top-nav">
        <ul>
          <li class="float-li li-rightb"><a id="main-page"  href="#tag-hot">&nbsp;造型百货&nbsp;</a></li>
          <li class="float-li li-rightb"><a target="_blank" href="#forum">&nbsp;讨论区&nbsp;</a></li>
          <li class="float-li" id="disp-list"><a href="#">&nbsp;TEST&nbsp;</a>
            <ul id="li-list">
              <li><a href="#" target="_blank">AAA</a></li>
              <li><a href="#" target="_blank">BBB</a></li>
              <li><a href="#" target="_blank">CCC</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </header>
    <div class="main-shop">
      <div class="left-preview">
        <span>冒险者小屋</span>
        <img alt="佐助" src="img/left.jpg">
        <span>Welcome ~ </span>
      </div>
      <div class="right-box">
        <div id="tag-hot"> 
          <br />
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>原谅帽</span>
              <hr /><br />
              <span class='detail-info'>当然是选择原谅他(她)啦 ~ </span>
            </div>
            <img class="content-img" alt="商品图片" src="img/green_hat.png">
            <div class="content-info">
              <span class="content-name">原谅帽</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥99.99</span>
                <span class='content-priceo'>￥199.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>女巫帽</span>
              <hr /><br />
              <span class='detail-info'>恶毒的女巫留下的帽子</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/witch_hat.png">
            <div class="content-info">
              <span class="content-name">女巫帽</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥77.77</span>
                <span class='content-priceo'>￥123.45</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>食铁兽</span>
              <hr /><br />
              <span class='detail-info'>当年黄帝大战蚩尤时，蚩尤的坐骑。</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/panda.png">
            <div class="content-info">
              <span class="content-name">食铁兽</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥0.01</span>
                <span class='content-priceo'>￥9.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>绿蛇蛇</span>
              <hr /><br />
              <span class='detail-info'>史前生物，超级凶猛！</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/green_snake.png">
            <div class="content-info">
              <span class="content-name">绿蛇蛇</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥99999</span>
                <span class='content-priceo'>￥100000</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
        </div>
        <div id="tag-model">
          <br />
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>侦探帽</span>
              <hr /><br />
              <span class='detail-info'>戴上这顶帽子，你就是福尔摩斯！</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/detective_hat.png">
            <div class="content-info">
              <span class="content-name">侦探帽</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥79.99</span>
                <span class='content-priceo'>￥149.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>背心</span>
              <hr /><br />
              <span class='detail-info'>当年火云邪神的同款背心</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/vest.png">
            <div class="content-info">
              <span class="content-name">背心</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥9.99<sup>包邮</sup></span>
                <span class='content-priceo'>￥99.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
        </div>
        <div id="tag-decoration">
          <br />
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>钻戒</span>
              <hr /><br />
              <span class='detail-info'>哄女朋友的必备神器，只要998，给你送到家。</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/diamond_ring.png">
            <div class="content-info">
              <span class="content-name">钻戒</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥998.00</span>
                <span class='content-priceo'>￥9999.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
        </div>
        <div id="tag-pet">
          <br />
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>招财猫</span>
              <hr /><br />
              <span class='detail-info'>招财进宝</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/cat.png">
            <div class="content-info">
              <span class="content-name">招财猫</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥1799.99</span>
                <span class='content-priceo'>￥1999.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>旺财</span>
              <hr /><br />
              <span class='detail-info'>旺财狗，财旺福旺运道旺 ~ </span>
            </div>
            <img class="content-img" alt="商品图片" src="img/dog.png">
            <div class="content-info">
              <span class="content-name">旺财</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥999.99</span>
                <span class='content-priceo'>￥1999.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
        </div>
        <div id="tag-others">
          <br />
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>邪神面具</span>
              <hr /><br />
              <span class='detail-info'>洛基留下的面具，晚上戴上他会拥有超能力。</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/mask.png">
            <div class="content-info">
              <span class="content-name">邪神面具</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥99.99</span>
                <span class='content-priceo'>￥999.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>拐</span>
              <hr /><br />
              <span class='detail-info'>赵本山带上春晚的那副拐</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/crutches.png">
            <div class="content-info">
              <span class="content-name">拐</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥250.00</span>
                <span class='content-priceo'>￥500.00</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>俺不能死</span>
              <hr /><br />
              <span class='detail-info'>通灵术：召唤救护车，大喊俺不能死即可召唤。</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/ambulance.png">
            <div class="content-info">
              <span class="content-name">俺不能死</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥120.00</span>
                <span class='content-priceo'>￥999.99</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>迪迦的裤子</span>
              <hr /><br />
              <span class='detail-info'>迪迦奥特曼留下的裤子</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/trousers.png">
            <div class="content-info">
              <span class="content-name">迪迦的裤子</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥88.88</span>
                <span class='content-priceo'>￥888.88</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
        </div>
        <div id="tag-skin">
          <br />
          <div class="all-content">
            <div class='content-detail'>
              <span class='detail-name'>草帽海贼旗</span>
              <hr /><br />
              <span class='detail-info'>海贼-王路飞的海贼旗</span>
            </div>
            <img class="content-img" alt="商品图片" src="img/hzw.png">
            <div class="content-info">
              <span class="content-name">草帽海贼旗</span>
              <hr />
              <p class="content-price">
                <span class='content-pricen'>￥无价</span>
                <span class='content-priceo'>￥无价</span>
              </p>
              <div class="content-btn">
                <button class="preview-now">试用</button>
                <button class="buy-now">购买</button>
              </div>
            </div>
          </div>
        </div>
        <nav>
          <ul>
            <li id="hot-li"><a href="#tag-hot">热门商品</a></li>
            <li id="model-li"><a href="#tag-model">&nbsp;造&emsp;型&nbsp;</a></li>
            <li id="decoration-li"><a href="#tag-decoration">&nbsp;饰&emsp;品&nbsp;</a></li>
            <li id="pet-li"><a href="#tag-pet">&nbsp;宠&emsp;物&nbsp;</a></li>
            <li id="others-li"><a href="#tag-others">&nbsp;其&emsp;他&nbsp;</a></li>
            <li id="skin-li"><a href="#tag-skin">&nbsp;皮&emsp;肤&nbsp;</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <footer>
      <h4>&nbsp;CopyRight&copy;2019&emsp;<em>Write By Mr.He</em>&trade;</h4>
    </footer>
  </body>
</html>

